<template>
  <el-form ref="form" :model="form" label-width="80px">
    <!-- 所属类别：这是一个类别选择框 -->
    <el-form-item label="所属类别">
      <el-select v-model="form.category_id" placeholder="请选择">
        <el-option
          v-for="(item, index) in categories"
          :key="index"
          :label="item.title"
          :value="item.category_id"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- 这是一个布尔型按钮 -->
    <el-form-item label="是否发布">
      <el-switch v-model="form.status"></el-switch>
      <span class="tip">*不发布前台则无法显示</span>
    </el-form-item>
    <!-- 这里是两个独立的多选框 -->
    <el-form-item label="推荐类型">
      <el-checkbox label="置顶" name="type" v-model="form.is_top"></el-checkbox>
      <el-checkbox label="热门" name="type" v-model="form.is_hot"></el-checkbox>
    </el-form-item>
    <!-- 这两个是普通的文本输入框 -->
    <el-form-item label="内容标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="副标题">
      <el-input v-model="form.sub_title"></el-input>
    </el-form-item>
    <!-- 这是一个上传封面图片的项 -->
    <el-form-item label="封面图片">
      <!-- action 这个是图片上传发送的地址
      show-file-list 这个是设置是否上传多张图片
      on-success 这个是上传图片成功的回调函数
      before-upload 这个是上传图片之前的回调函数-->
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8899/admin/article/uploadimg"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <!-- 这四个是普通的文本输入框 -->
    <el-form-item label="商品货号">
      <el-input v-model="form.goods_no"></el-input>
    </el-form-item>
    <el-form-item label="库存数量">
      <el-input v-model="form.stock_quantity"></el-input>
      <span class="tip">*不确定要不要自动生成</span>
    </el-form-item>
    <el-form-item label="市场价格">
      <el-input v-model="form.market_price"></el-input>
    </el-form-item>
    <el-form-item label="销售价格">
      <el-input v-model="form.sell_price"></el-input>
    </el-form-item>
    <!-- 这个是上传商品相册的项 -->
    <el-form-item label="图片相册">
      <!-- action 图片上传的地址
      list-type 文件列表的类型
      file-list 用于显示已经存在的图片
      on-preview 预览图片的回调函数
      on-remove 移除图片的回调函数
      on-success 上传成功的回调函数-->
      <el-upload
        action="http://localhost:8899/admin/article/uploadimg"
        list-type="picture-card"
        :file-list="form.fileList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleImgCart"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <!-- :visible.sync="dialogVisible" 设置显示和隐藏的命令
      dialogImageUrl 预览图片的路径-->
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt>
      </el-dialog>
    </el-form-item>
    <el-form-item label="内容摘要">
      <el-input type="textarea" v-model="form.zhaiyao"></el-input>
    </el-form-item>
    <!-- 这个是富文本插件 -->
    <div class="edit">
      <el-form-item label="内容摘要">
        <quillEditor v-model="form.content"></quillEditor>
      </el-form-item>
    </div>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">完成</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 导入编辑器外部的样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  data() {
    return {
      // 这个是储存表单数据的对象
      form: {
        category_id: "",
        status: false,
        is_top: false,
        is_hot: false,
        titlee: "",
        sub_titlee: "",
        // 封面图片的数组，通常只有一个
        imgList: [],
        fileList: [],
        goods_no: "",
        stock_quantity: "",
        market_price: "",
        sell_price: "",
        zhaiyao: "",
        content: "",
        // 设置轮播图
        is_slide: true
      },
      // 这个是保存商品类别的数组
      categories: [],
      // 这个是保存上传图片的数据
      imageUrl: "",
      // 这两个是图片相册中的参数，组件自带的
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    // 这个是上传表单的方法
    onSubmit() {
      // 发送表单数据
      this.$axios({
        method: "POST",
        url: `/admin/goods/edit/${this.$route.params.id}`,
        data: this.form,
        // 由于在8080端口下去请求8899端口，涉及到跨域
        withCredentials: true
      }).then(res => {
        const { message, status } = res.data;
        if (status == 0) {
          // 创建成功 --- 1.提示用户；2.跳转到商品列表页面
          this.$message({
            message,
            type: "success"
          });
          this.$router.push("/admin/goods-list");
        } else {
          // 创建失败--提示用户
          this.$message.error(message);
        }
      });
    },
    // 这个是取消的操作
    handleCancel() {
      // 返回上一页
      this.$router.back();
    },
    // 这里是上传封面图片的方法
    // 这个是上传图片成功的回调函数
    handleAvatarSuccess(res, file) {
      // 这条命令是用于预览图片的，URL.createObjectURL这个是出于window下H5的新街口，file.raw是路径
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将图片保存在本地数据,因为数据通常只有一个，所以可以直接赋值给数组的第一项
      this.form.imgList[0] = res;
    },
    // 这个是上传图片之前的回调函数
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    // 这里是上传图片相册的方法
    // 这个是移除图片后的方法
    handleRemove(file, fileList) {
      // file 是删除的图片
      // fileList 是删除后剩余的上传图片
      // fileList中response就是我们需要的图片属性
      // 因为fileList返回的是一个数组，所以这里要使用遍历的方法来获取
      this.form.fileList = fileList.map(v => {
        return v.response;
      });
    },
    // 这个是预览多张图片的方法
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 这个是上传成功的回调函数
    handleImgCart(res, file) {
      // res的返回值就是我们需要的图片信息，所以只需要把数据加入图片相册即可
      this.form.fileList.push(res);
    }
  },
  mounted() {
    // 获取分类目录的数据
    this.$axios({
      url: "/admin/category/getlist/goods"
    }).then(res => {
      const { message } = res.data;
      this.categories = message;
    });
    // 将编辑的商品数据渲染到页面
    const { id } = this.$route.params;
    this.$axios({
      url: `/admin/goods/getgoodsmodel/${id}`
    }).then(res => {
      const { message, status } = res.data;
      this.form = message;
      // 预览封面图片
      this.imageUrl = message.imgList[0].url;
      // 预览图片相册
      this.form.fileList = message.fileList.map(v => {
        return {
          ...v,
          url: `http://127.0.0.1:8899` + v.shorturl
        };
      });
    });
  },
  components: {
    // 编辑器组件
    quillEditor
  }
};
</script>

<style>
.tip {
  color: rgb(173, 168, 168);
  margin-left: 20px;
}
.el-input.el-input--suffix {
  width: 180px;
}
.edit .el-form-item__content {
  line-height: unset;
}
/* 这些是上传图片项的样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 到这里结束 */
</style>
